<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-06-04 15:49:28
 * @Descripttion: 
-->
<template>
  <div class="container">
    <el-menu
      :default-active="activeIndex"
      class="nav"
      mode="vertical"
      background-color="#194E87"
      text-color="#e6f7ff"
      active-text-color="#ffffff"
      @select="handleSelect"
    >
      <template v-for="(item, index) in navList">
        <el-menu-item
          :key="index"
          v-if="item.children?.length === 0"
          :index="item.path"
          style="font-size: 16px; font-weight: bold"
          :class="item.path == activeIndex ? 'active' : '' ">
          {{item.title }}
        </el-menu-item>
        <el-sub-menu
          :key="index"
          v-if="item.children?.length > 0"
          :index="item.path"
          style="font-size: 16px; font-weight: bold"
          :class="item.path == activeIndex ? 'active' : '' ">
          <template #title><span style="font-size: 16px; font-weight: bold"> {{ item.title }}</span></template>
          <el-menu-item
            v-for="subItem in item.children"
            :key="item.path + subItem.path"
            :index="item.path + subItem.path"
            style="font-size: 16px; font-weight: bold"
            :class="(item.path + subItem.path) == activeIndex ? 'active' : '' ">
            {{ subItem.title }}</el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>('/enterprise-service/consult/mentors');

const navList = ref([
  {
    title: '专家库',
    path: '/enterprise-service/consult',
    children: [
      { title: '创业导师', path: '/mentors' },
      { title: '成果转化专员', path: '/specialists' },
    ],
  },
  { title: '第三方合作机构', path: '/enterprise-service/consult/service-list',children: [] },
  // { title: '讲师', path: '/enterprise-service/consult/lecturer' },
  // { title: '专家库', path: '/enterprise-service/consult/technician' },
]);

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key)
  try {
      router.push(key);
  }catch(err) {
    console.log(err)
  }

};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
  curPath,
  () => {
    // 正确显示当前显示的nav
    activeIndex.value = route.path;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
}

.active{
  background-color: #003B7A !important;
}

.nav {
  width: 400px;
  //background-color: #545c64;
  //.el-menu-item.is-active {
  //  border-left: 4px solid #ffd04b;
  //}
}
</style>
